<template>
  <div>
    <div class="header">
      <span @click="fun()">&lt;</span>
      <span @click="fun()">x</span>
      <span>权益领取中心</span>
    </div>
    <div class="banner">
      <img src="img/zhangimg/jiatinghuiyuan/1.gif" alt="" />
    </div>
    <main>
      <img class="img" src="img/zhangimg/jiatinghuiyuan/2.gif" alt="" />
      <h1>
        <img src="img/zhangimg/jiatinghuiyuan/3.gif" alt="" />
        <span>全球通尊享</span>
      </h1>
      <div class="tu">
        <img src="img/zhangimg/jiatinghuiyuan/4.gif" alt="" />
        <img class="img1" src="img/zhangimg/jiatinghuiyuan/5.gif" alt="" />
        <img src="img/zhangimg/jiatinghuiyuan/6.gif" alt="" />
        <img class="img1" src="img/zhangimg/jiatinghuiyuan/7.gif" alt="" />
      </div>
      <h1>
        <img src="img/zhangimg/jiatinghuiyuan/8.gif" alt="" />
        <span>全球通尊享</span>
      </h1>
      <div class="tu1">
        <img src="img/zhangimg/jiatinghuiyuan/9.gif" alt="" />
        <img class="img1" src="img/zhangimg/jiatinghuiyuan/10.gif" alt="" />
        <img class="img1" src="img/zhangimg/jiatinghuiyuan/11.gif" alt="" />
      </div>
      <div class="gao"></div>
    </main>
    <footer>
        <div class="xuan">
          <input type="checkbox">
          <span>阅读并同意《家庭会员用户协议》</span>
      </div>
      <div class="footer">
          立即订购，享多重优惠
      </div>
    </footer>
  </div>
</template>

<script>
export default {
  methods: {
    fun() {
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped>
.header {
  width: 3.6rem;
  height: 0.5rem;
  line-height: 0.5rem;
}
.header span:nth-child(1) {
  margin: 0.2rem 0.2rem 0 0.14rem;
  font-size: 0.25rem;
}
.header span:nth-child(2) {
  margin-right: 0.5rem;
  font-size: 0.25rem;
}
.header span:nth-child(3) {
  font-size: 0.18rem;
  font-weight: 900;
}
.banner img {
  width: 100%;
  height: 2.04rem;
}
main h1 {
  width: 3.6rem;
  height: 0.46rem;
  font-size: 0.16rem;
  display: flex;
  margin-left: 0.14rem;
  line-height: 0.46rem;
}
main .img{
    width: 100%;
    height: .6rem;
}
main h1 img {
  width: 0.54rem;
  height: 0.5rem;
}
main .tu {
  width: 3.6rem;
  height: 2.36rem;
  margin-left: 0.14rem;
}
main .tu img {
  width: 1.67rem;
  height: 1.14rem;
}
main .tu .img1 {
  margin-left: 0.2rem;
}
main .tu1 {
  width: 3.6rem;
  margin-left: 0.14rem;
}
main .tu1 img {
  width: 1.09rem;
  height: 1.07rem;
}
main .tu1 .img1{
    margin-left: .12rem;
}
main .gao{
    height: 1.4rem;
}
footer .xuan{
    width: 100%;
    height: .46rem;
    text-align: center;
    line-height: .46rem;
}
footer{
    width: 100%;
    height: 1.3rem;
    text-align: center;
        position: fixed;
    bottom: -0.1rem;
    background-color: white;
}
footer .xuan span{
    font-size: .12rem;
    color: gray;
}
footer .footer{
    width: 3.3rem;
    height: .46rem;
    background-color: #3f3939;
    color: #dac290;
    margin-left: .27rem;
    line-height: .46rem;
    border-radius: .2rem;
}
</style>